<template>
  <div class="main">
    <!-- <div class="title" style="font-size: 0.4rem">我的副卡</div> -->
    <van-tabs @click="onCheck">
      <van-tab title="我加入的" name="1"></van-tab>
      <van-tab title="归属我的" name="2"></van-tab>
    </van-tabs>
    <div class="sub_main">
      <div
        v-for="item in cardList"
        style="height: 3.2rem"
        :key="item.id"
        class="container-flex"
        :class="[cardOilsTypeClass[item.cardOilsType]]"
      >
        <div class="cardContainer">
          <div class="text">{{ item.customerName }}</div>
          <div class="title1">
            <span>{{ item.amt ? item.amt.toFixed(2) : "0.00" }}元</span>
          </div>
          <div class="phone" v-if="type == '1'">主卡手机号：{{ item.mainMobilePhone }}</div>
          <div class="phone" v-else>副卡手机号：{{ item.mobilePhone }}</div>
          <div class="bottom">
            <div class="btn">
              <van-button round type="default" @click="onDel(item.id)"
                >删除副卡</van-button
              >
              <van-button round type="default" @click="onRecycle(item.id)"
                >回收余额</van-button
              >
            </div>
            <div class="station_name">
              <div>
                {{ cardOilsTypeText[item.cardOilsType] }}
              </div>
              <div>{{ item.stationName }}</div>
            </div>
          </div>
        </div>
        <div class="type">{{ item.cardRuleType == "1" ? "共享" : "分配" }}</div>
      </div>
      <div class="empty">
        {{ tip }}
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Button, Dialog, Toast,Tab,Tabs } from "vant";
import { mapState, mapGetters } from "vuex";
Vue.use(Button);
Vue.use(Dialog);
Vue.use(Toast);
Vue.use(Tab);
Vue.use(Tabs)

export default {
  head() {
    return {
      title: "副卡管理",
    };
  },
  data() {
    return {
      cardOilsTypeClass: ["generic", "gasoline", "diesel", "lng", "cng"],
      cardOilsTypeText: ["通用卡", "汽油卡", "柴油卡", "LNG卡", "CNG卡"],
      cardList: [],
      tip: "",
      type: '1', //判断调用的是哪个列表 1是加入的 2是拥有的
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo",
    }),
  },
  created() {
    console.log(this.userInfo.userId , 'this.userInfo.userId');
    this.init();
  },
  methods: {
    // 判断调用哪个方法的
    async init() {
      let url
      if(this.type === '1') {
        url = "/electronic/deputy/allDeputy/list"
      }else {
        url = "/electronic/deputy/allDeputyByMain/list"
      }
      console.log(this.type, 'this.type');
      const res = await this.$axios.$post(url, {
        userId: this.$route.query.userId || this.userInfo.userId,
      });
      this.cardList = res.data;
      if (!this.cardList || (this.cardList && this.cardList.length <= 0)) {
        this.tip = "暂无副卡";
      }
    },
    // 切换tab 调用不同列表接口
    onCheck(e) {
      this.cardList = []
      this.tip = ""
      this.type = e
      this.init()
    },
    async onRecycle(id) {
      await Dialog.confirm({
        message: "确认回收该副卡所有余额吗？",
      });
      const res = await this.$axios.$get("/electronic/deputy/recovery", {
        params: { id },
      });
      this.toastTip(res)
      this.init();
    },
    async onDel(id) {
      await Dialog.confirm({
        message: "确认删除该副卡吗？",
      });
      const res = await this.$axios.$get("/electronic/deputy/delete", {
        params: { id },
      });
      this.toastTip(res)
      this.init();
    },
    toastTip(res) {
      if (res.retCode === 0) {
        Toast.success(res.message);
      } else {
        Toast.fail(res.message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .van-tabs__nav {
  background-color: transparent;
}
::v-deep .van-tabs__line  {
  background-color: #2670c3;
}
.main {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.3rem;
  box-sizing: border-box;
  .empty {
    width: 100%;
    font-size: 0.4rem;
    text-align: center;
    height: 10vh;
    line-height: 10vh;
  }
  .generic {
    background: url("~static/personal/bj8@2x.png") no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .gasoline {
    background: url("~static/personal/qiyouka.png") no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .diesel {
    background: url("~static/personal/cyk.png") no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .notoil {
    background: url("~static/personal/bj5.2x.png") no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .lng {
    background: url("~static/personal/lng.png") no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .cng {
    background: url("~static/personal/cng.png") no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .sub_main {
    .container-flex {
      display: flex;
      flex-direction: row;
      padding: 0.35rem;
      box-sizing: border-box;
      margin-top: 0.3rem;
      position: relative;
      .type {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 0.32rem;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.221);
        border-radius: 0.1rem;
        padding: 0.1rem;
      }
    }
    .cardContainer {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
    }

    .title {
      height: 0.45rem;
      font-size: 0.45rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 0.35rem;
    }

    .title1 {
      height: 0.45rem;
      font-size: 0.32rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 0.45rem;
    }
    .phone {
      font-size: 0.3rem;
      color: #ffffff;
      line-height: 0.65rem;
    }
    div .text {
      color: #ffffff;
      height: 0.45rem;
      font-size: 0.32rem;
      font-weight: 500;
      line-height: 0.45rem;
      padding-bottom: 0.35rem;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      ::v-deep .van-button {
        height: 0.65rem;
        font-size: 0.25rem;
        padding: 0 8px;
      }
      .btn {
        width: 48%;
        display: flex;
        justify-content: space-evenly;
      }
    }
    .station_name {
      padding-bottom: 5px;
      text-align: right;
      font-size: 0.32rem;
      color: #fff;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
